/*
 * @Author: 肖思汗 
 * @Date: 2025-06-24 18:44:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-09-11 15:43:52
 */

import { Button, Cell, DatePicker, Form, Input, Radio } from '@nutui/nutui-react-taro';
import { Image } from "@tarojs/components";
import Taro, { useDidShow } from '@tarojs/taro';
import { autorun } from 'mobx';
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useState } from "react";
import Api from "src/api/Api";
import utilsApi from "src/api/utilsApi";
import PageLayer from "src/components/PageLayer/PageLayer";
import smallLogoPNG from "src/static/UTlogo.svg";
import utils from "src/utils/utils";
import styles from "./userInfo.module.less";
import userInfoStore from "./userInfoStore";

interface Iprops {
    children?: ReactNode
}

// 用户信息页面组件
const UserInfo = observer((props: Iprops) => {

    const [show, setShow] = useState<boolean>(false);

    const [form] = Form.useForm();

    useDidShow(() => {
        userInfoStore.getCurrentUser();
        userInfoStore.getOriginUserCode();
    });

    useEffect(() => autorun(() => {
        console.log("autorun");
        const { userName, phoneNumber, sex, birth, profilePicture, originUserCode } = userInfoStore;
        console.log("originUserCode", originUserCode);
        Taro.nextTick(() => {
            form.setFieldsValue({
                userName: userName,
                phoneNumber: phoneNumber,
                sex: sex ? 1 : 0,
                birth: birth,
                profilePicture: profilePicture,
                originUserCode: originUserCode
            });
        });
    }, { delay: 30 }), []);


    return (
        <PageLayer
            title="用户信息"
            showBack
            className={styles.userInfo}
            hasTabBar={false}
        >
            <Button
                openType='chooseAvatar'
                className={styles.avatarBtn}
                onChooseAvatar={async (e) => {
                    console.log(e);
                    //@ts-ignore
                    const avatarUrl = e.mpEvent.detail.avatarUrl;
                    console.log("avatarUrl", avatarUrl);
                    const url = await utilsApi.uploadOss(avatarUrl, Api.ossDirectory);
                    userInfoStore.profilePicture = url;
                }}
            >
                <Image
                    className={styles.avatar}
                    src={userInfoStore.profilePicture ? utils.ossSuffix(userInfoStore.profilePicture) : smallLogoPNG}
                />
            </Button>

            <Form
                form={form}
                labelPosition="right"

                onFinish={(values) => {
                    console.log(values);
                    const { originUserCode, ...otherValues } = values;
                    userInfoStore.updateUserInfo(otherValues);
                    if (!userInfoStore.originUserCode && originUserCode) {
                        userInfoStore.bindPromotionCode(originUserCode);
                    }
                }}
                onFinishFailed={(values, errors) => { }}
                footer={
                    <>
                        <Button nativeType="submit" block type="primary">
                            提交
                        </Button>
                    </>
                }
            >
                <Form.Item
                    align="center"
                    label="昵称"
                    name="userName"
                    rules={[
                        // { required: true, message: '请输入昵称' },
                    ]}
                >
                    <Input
                        type="nickname"
                        placeholder="请输入昵称"
                    />
                </Form.Item>

                <Form.Item
                    label="性别"
                    name="sex"
                >
                    <Radio.Group

                        shape="button"
                        direction="horizontal"
                        style={{ marginTop: "-6rpx" }}
                    >
                        <Radio value={0}>男</Radio>
                        <Radio value={1}>女</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    label="生日"
                    name="birth"
                >
                    <Input
                        placeholder="请选择日期"
                        onClick={() => setShow(true)}
                        readOnly
                    />
                </Form.Item>


                <Form.Item
                    label="电话"
                    name="phoneNumber"
                    rules={[
                        { length: 11, message: '请输入11位手机号码' },
                    ]}
                >
                    <Cell
                        style={{
                            alignItems: 'center',
                            padding: 0
                        }}
                        title={
                            <Input
                                placeholder="请输入电话"
                                type="number"
                                readOnly
                                value={userInfoStore.phoneNumber}
                                onChange={(v) => {
                                    userInfoStore.phoneNumber = v;
                                }}
                            />
                        }
                        extra={
                            <Button
                                openType="getPhoneNumber"
                                onGetPhoneNumber={e => userInfoStore.getPhoneNumber(e)}
                                type="primary"
                                style={{
                                    marginTop: "-6rpx",
                                    marginLeft: "-40rpx"
                                }}
                            >
                                授权
                            </Button>
                        }
                    />
                </Form.Item>

                <Form.Item
                    align="center"
                    label="邀请码"
                    name="originUserCode"
                    rules={[
                        // { required: true, message: '请输入邀请码' },
                    ]}
                >
                    <Input
                        placeholder="请输入邀请码(选填)"
                        readOnly={Boolean(userInfoStore.originUserCode)}
                    />
                </Form.Item>

            </Form>

            <DatePicker
                type="date"
                defaultValue={userInfoStore.birth ? new Date(userInfoStore.birth) : new Date(new Date().getFullYear() - 20, 0, 1)}
                showChinese
                visible={show}
                startDate={new Date(1960, 0, 1)}
                endDate={new Date()}
                onClose={() => setShow(false)}
                onConfirm={(value) => {
                    setShow(false);
                    const birth = value.map((item) => item.value).join("-");
                    userInfoStore.birth = birth;
                    console.log("birth", birth);
                }}
            />

        </PageLayer >
    );
});

export default UserInfo;